<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>学成在线页面渲染</title>
  <style>
    .course-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .course-card {
      width: 200px;
      border: 1px solid #eee;
      border-radius: 4px;
      overflow: hidden;
    }

    .cover-img {
      width: 100%;
      height: 120px;
      object-fit: cover;
    }

    .course-title {
      font-size: 16px;
      padding: 8px;
    }

    .study-info {
      font-size: 14px;
      color: #999;
      padding: 0 8px 8px;
    }
  </style>
</head>

<body>
  <h2>精品推荐</h2>
  <div class="course-list" id="courseList"></div>

  <script>
    // 课程数据
    const courseListData = [
      {
        cover: "https://example.com/course1.jpg",
        title: "ThinkPHP6 博客系统实战",
        studyNum: "1.2万人学习"
      },
      {
        cover: "https://example.com/course2.jpg",
        title: "Android 网络编程实战",
        studyNum: "8532人学习"
      },
      {
        cover: "https://example.com/course3.jpg",
        title: "Aqulus2 动画开发",
        studyNum: "9210人学习"
      },
      {
        cover: "https://example.com/course4.jpg",
        title: "Android Hybrid App实战",
        studyNum: "7890人学习"
      },
      {
        cover: "https://example.com/course5.jpg",
        title: "UGUI 案例实战解析",
        studyNum: "1.1万人学习"
      },
      {
        cover: "https://example.com/course6.jpg",
        title: "kami2 首页界面切换",
        studyNum: "4560人学习"
      },
      {
        cover: "https://example.com/course7.jpg",
        title: "Cocos 效果学习与千峰",
        studyNum: "6780人学习"
      },
      {
        cover: "https://example.com/course8.jpg",
        title: "Unity 入门从基础到实战",
        studyNum: "8900人学习"
      }
    ];

    // 获取容器元素
    const courseListContainer = document.getElementById('courseList');

    // 遍历数据，创建并插入课程卡片
    courseListData.forEach(course => {
      // 创建课程卡片div
      const courseCard = document.createElement('div');
      courseCard.className = 'course-card';

      // 创建封面图img
      const coverImg = document.createElement('img');
      coverImg.className = 'cover-img';
      coverImg.src = course.cover;
      coverImg.alt = '课程封面';

      // 创建课程标题h3
      const courseTitle = document.createElement('h3');
      courseTitle.className = 'course-title';
      courseTitle.textContent = course.title;

      // 创建学习人数p
      const studyInfo = document.createElement('p');
      studyInfo.className = 'study-info';
      studyInfo.textContent = course.studyNum;

      // 将子元素依次添加到课程卡片中
      courseCard.appendChild(coverImg);
      courseCard.appendChild(courseTitle);
      courseCard.appendChild(studyInfo);

      // 将课程卡片添加到容器中
      courseListContainer.appendChild(courseCard);
    });
  </script>
</body>

</html>